<template>
  <div class="detail">
    <div class="content">
      <img :src="detail.picture ? detail.picture : defaultImg" />
      <figcaption>
        <h3>{{ detail.topic }}</h3> 
        <div>
          <ul>
            <li>
              <mark>出发地 </mark>
              <!-- 选择框，从数据库中读取，读到出发地+价格+交通方式，会更换价格 -->
              <el-select v-model="query.traffic_place" size="small" placeholder="请选择出发地" @change="changeType">
                <el-option
                  v-for="item in options"
                  :key="item.tc_id"
                  :label="item.traffic_place"
                  :value="item.tc_id">
                </el-option>
              </el-select>
            </li>
            <li><mark>交通方式 </mark>{{ query.traffic_type }}</li>
            <li v-if="detail.tourist_province"><mark>目的地 </mark>{{ detail.tourist_province + ' ' + detail.tourist_city }}</li>
            <!-- <li><mark>团期</mark>:2016-5-5</li> -->
          </ul>
        </div>
        <div class="buy">
          <div class="price">
            ¥<strong>{{ query.traffic_cost }}</strong> 
            <!-- <s>¥3302</s> -->
          </div>
          <div class="now"><a href='#'>立即抢购</a></div>
        </div>
        <div class="type">{{ detail.tourist_type }}</div>
        <!-- <div class="desc">4.7折</div> -->
        <!-- <footer>
          活动截止时间<time>2016-2-5</time>
        </footer> -->
      </figcaption>
    </div>
         <h3>旅游内容</h3>
    <div class="content" v-html="detail.details"  >
      <p>{{ detail.details }}</p>
    </div>
         <h3>费用说明</h3>
    <div class="content" v-html="detail.cost_description">
      <p>{{ detail.cost_description }}</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      query: {
        tc_id: 1,
        traffic_cost: 1123,
        traffic_type: '火车',
        traffic_place: '深圳',
      },
      detail: {
        topic: '敬请期待',
        cost: 2512,
        tourist_type: '敬请期待',
        details: '敬请期待',
        cost_description: '<h2>费用包含</h2><p>大交通飞机往返经济舱机票</p ><p>燃油附加费（以实际收费标准为准，如遇政府或航空公司政策性调整燃油税费，在未出票的情况下将进行多退少补）</p ><p>机场建设费</p ><p>以上为参考交通信息，最终出行信息请联系商家客服确认。</p ><p>行程中披露航班时间仅供参考，以实际出票为准！具体航班信息请参考出团通知书。普通航班含行李托运20KG(部分廉航除外)，乘坐廉价航空(如春秋，九元，联航等)的旅客，可免费携带一件重量不超过5KG的非托运行李进入客舱，其体积不得超过20×40×55厘米。逾重行李请旅客自行到各机场值机柜台购买，提前到达机场，预留逾重购买行李额的时间。</p ><p>为了节省您的出行成本，产品展示飞机往返报价为系统默认预定实时低价航班组合，多为夜航或廉价航空，若您对航班以及时间有特殊要求或指定，请出票前联系客服补差价，团队机票一经开出，不退，不改，不签！</p ><p>当地交通根据参团人数调派车型，保证一人一正座</p ><p>拉萨贡嘎机场往返接送服务</p ><p>24小时接站+送站服务（接送站为普通商务车）</p ><p>当地指定车型用车，豪华17座奔驰座驾，尊贵VIP待遇（仅限VIP12人小团）。全团人数低于6人时将更换使用7座别克GL8商务座驾。</p ><p>奔驰车应车公司要求，单趟单测，拉萨市内当天会检测车辆，当天行程会更换为5-29座康恩迪或考斯特等普通车型，市内用车时间也比较短，整天用车大概1小时左右，敬请知悉！圣象天门段根据人数安排车型。</p ><p>我社根据人员多少调配车型，行车期间一般不开空调【原因西藏气候温度适中；高原气候，开空调会使动力不足，司机难驾驭，路途遥远/艰险，会导致上坡受阻】我社只保证每人每一座，不能提供座次要求。</p >'
      },
      options: [{
        tc_id: 1,
        traffic_place: '深圳',
        traffic_cost: 1123,
        traffic_type: '火车'
      }, {
        tc_id: 2,
        traffic_place: '广州',
        traffic_cost: 1456,
        traffic_type: '火车'
      }, {
        tc_id: 3,
        traffic_place: '北京',
        traffic_cost: 1234,
        traffic_type: '飞机'
      }],
      defaultImg: require('../../assets/images/tour1.jpg')
    }
  },
  created() {
    this.getDetail()
    this.getTransportation()
  },
  methods: {
    changeType(id) {
      this.options.some(item => {
        if (item.tc_id == id) {
          this.query.tc_id = id
          this.query.traffic_cost = item.traffic_cost
          this.query.traffic_type = item.traffic_type
          return true
        }
        return false
      })
    },
    async getDetail() {
      const [err, res] = await this.$api.getSelectTouristDetail({ id: this.$route.query.id })
      if (err) {
        err.msg = '获取数据失败'
        console.log(err)
        return
      }
      this.detail = res.data
    },
    async getTransportation() {
      const [err, res] = await this.$api.getTransportation({ id: this.$route.query.id })
     console.log(this.$route.query.id)
      if (err) {
        err.msg = '获取数据失败'
        console.log(err)
        return
      }
      this.options = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  width: 900px;
  margin: 30px auto 80px;

  .content {
    width: 898px;
    min-height: 230px;
    position: relative;
    margin-bottom: 20px;
    footer{
      width: 518px;
      height: 30px;
      line-height: 30px;
      text-indent: 25px;
      letter-spacing: 1px;
    }
    time{
      color: #458b00;
    }
    img{
      height: 230px;
      width: 380px;
      float: left;
    }
    figcaption{
      float: right;
      width:518px;
      height: 230px;
    }
    h2{
      padding:10px 0 10px 20px;
      font-size: 24px;
      font-weight: normal;
      color: #333;
    }
    h3{
      line-height: 1.5;
      padding: 10px 0 10px 25px;
    }
    p {
      padding: 0 0 10px 25px;
    }
    ul{
      padding:0 0 0 25px;
      color: #666;
      line-height:1.8;

      li {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
    }
    mark{
      color: #fff;
      background-color: #458b00;
      border-radius:4px;
      padding: 0 5px;
      margin-right: 10px;
    }
    .buy{
      position: absolute;
      right: 30px;
      top: 133px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .price{
        font-size: 20px;
        color:#f60;
        strong{
          font-size: 36px;
        }
        s{
          color:#999;
          font-size: 16px;
        }
      }
      .now{
        margin:10px 0 0 0;
        a{
          display: block;
          width: 152px;
          height: 40px;
          line-height: 40px;
          background-color: #f60;
          color:#fff;
          font-size: 20px;
          text-align:center;
          border-radius: 4px;
        }
      }
    }
    .type{
      width:90px;
      height:25px;
      line-height: 25px;
      font-size: 14px;
      text-align: center;
      color: #fff;
      position: absolute;
      top:0;
      left: 0;
      background: #29b200;
    }
    .desc{
      position: absolute;
      top:0;
      right: 0;
      background-color: #ccc;
      width: 50px;
      height:25px;
      line-height: 25px;
      text-align: center;
      color: #f60;
      font-weight:bold;
    }
  }
}
</style>
